<template>
  <div class="header-info">
    <div class="operation">
      <span>
        <el-icon><Message /></el-icon>
      </span>
      <span class="full-screen" @click="handleFullScreenClick">
        <el-tooltip
          :content="isFull ? '全屏' : '退出全屏'"
          effect="light"
          placement="bottom"
        >
          <el-icon><FullScreen /></el-icon>
        </el-tooltip>
      </span>

      <span>
        <span class="dot"></span>
        <el-icon><Postcard /></el-icon>
      </span>
    </div>
    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <el-avatar
            class="avatar"
            :size="30"
            src="https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg"
          />
          <span class="name"> hzqhxy</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleExitClick"
              ><el-icon><CircleCloseFilled /></el-icon
              >退出系统</el-dropdown-item
            >
            <el-dropdown-item divided @click="handleUserCenterClick"
              ><el-icon><InfoFilled /></el-icon>个人中心</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <UserCenter ref="dialogRef" />
</template>

<script setup lang="ts">
// 模块引入
import { ref } from 'vue'
import useLoginStore from '@/store/login'
import UserCenter from './userCenter/index.vue'
import { useComponentRef } from '@/components/hooks'

defineOptions({
  // 组件名称
  name: 'HeaderInfo',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
const dialogRef = useComponentRef(UserCenter)
const loginStore = useLoginStore()
// 事件
const handleExitClick = () => {
  loginStore.logout()
}

const handleUserCenterClick = () => {
  dialogRef.value?.setDialogVisible()
}
const isFull = ref<boolean>(false)
const handleFullScreenClick = () => {
  //DOM对象的一个属性：可以用来判断当前是不是全屏的模式【全屏：true，不是全屏：false】
  let full = document.fullscreenElement
  //切换成全屏
  if (!full) {
    //文档根节点的方法requestFullscreen实现全屏
    document.documentElement.requestFullscreen()
    isFull.value = true
  } else {
    //退出全屏
    document.exitFullscreen()
    isFull.value = false
  }
}
</script>

<style scoped lang="scss">
.header-info {
  display: flex;
  align-items: center;
  .operation {
    display: inline-flex;
    margin-right: 20px;

    span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 35px;

      &:hover {
        background: #f2f2f2;
      }

      i {
        font-size: 20px;
      }

      .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 100%;
      }
    }
  }

  .info {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .name {
        margin-left: 5px;
      }
    }
  }

  .info {
    :global(.el-dropdown-menu__item) {
      line-height: 36px !important;
      padding: 6px 22px;
    }
  }
}
.full-screen {
  cursor: pointer;
}
</style>
